<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="污染企业">
          <!-- <el-select v-model="searchForm.companyName" placeholder="请选择企业">
            <el-option v-for="item in companyList" :key="item.companyName" :label="item.companyName" :value="item.companyName"></el-option>
          </el-select> -->
          <el-cascader class="horizontal-scroll" style="width: 300px;"  v-model="searchForm.companyName" :options="companyList" :props="props" collapse-tags
            clearable></el-cascader>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%" border>
      <el-table-column type="index" label="序号" width="80" align="center">
        <template slot-scope="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="PolluteName" label="企业名称" min-width="180" align="center"></el-table-column>
      <el-table-column prop="011value" label="COD (kg)" min-width="120" align="center">

      </el-table-column>
      <el-table-column prop="101value" label="总磷 (kg)" min-width="120" align="center">

      </el-table-column>
      <el-table-column prop="065value" label="总氮 (kg)" min-width="120" align="center">

      </el-table-column>
      <el-table-column prop="060value" label="氨氮 (kg)" min-width="120" align="center">

      </el-table-column>
      <el-table-column prop="total" label="合计 (kg)" min-width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.amountValue }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container" v-if="total > 0">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :current-page="pageNum" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import { enterpriseRelation, polluteTree } from './api.js'
export default {
  name: 'CompanyPollutionStatistics',
  data() {
    return {
      loading: false,
      props: { multiple: true, value: 'id', label: 'name' },
      companyList: [],
      searchForm: {
        companyName: [],
        dateRange: []
      },
      tableData: [

      ],
      pageNum: 1,
      pageSize: 10,
      total: 0,
    }
  },
  created() {
    // 获取当前时间
    const now = new Date();
    // 创建一周前的日期对象
    const oneWeekAgo = new Date(now);
    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
    // 设置日期范围，第一项为一周前，第二项为当前时间
    this.searchForm.dateRange = [this.parseTime(oneWeekAgo, '{y}-{m}-{d}'), this.parseTime(now, '{y}-{m}-{d}')]

    // 获取数据列表
    this.query();
  },
  mounted() {

  },
  methods: {
    handleChange(val) {
      
      let arr = []
      for (let item of val) {
        if (item.length > 0) {
          arr.push(item[item.length - 1])
        }
      }
      return arr.join(',')
      // this.searchForm.companyName = arr;
    },
    async query() {
      await this.polluteTree();
      this.getList();
    },
    polluteTree() {
      this.companyList = [];
      polluteTree().then(res => {
        if (res.code == '200') {
          this.companyList = res.data || [];
          this.searchForm.companyName = this.getTreeData(this.companyList);
        }
      })
    },
    getTreeData(data){
      let result = [];
      function traverse(nodes, path = []) {
        nodes.forEach(node => {
          // 将当前节点的 id 添加到路径中
          const currentPath = [...path, node.id];
          
          // 如果有子节点，则继续遍历子节点
          if (node.children && node.children.length > 0) {
            traverse(node.children, currentPath);
          } else {
            // 如果没有子节点，说明是叶子节点，将路径添加到结果中
            result.push(currentPath);
          }
        });
      }
      traverse(data);
      
      return result;
    },
    // 获取数据列表
    getList() {
      this.loading = true;
      // 构建请求参数，包含搜索条件和分页信息
      let outPortCode =  this.handleChange(this.searchForm.companyName)
      const params = {
        beginTime: this.searchForm.dateRange[0],
        endTime: this.searchForm.dateRange[1],
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        outPortCode,
      };
      enterpriseRelation(params).then(res => {
        this.loading = false;
        // 假设接口返回格式包含rows和total
        if (res && res.rows) {
          this.tableData = res.rows;
          this.total = res.total || 0;
        }
      }).catch(error => {
        this.loading = false;
        
      })
    },
    // 搜索按钮点击事件
    handleSearch() {
      this.pageNum = 1; // 搜索时重置到第一页
      this.getList();
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1; // 改变每页条数时重置到第一页
      this.getList();
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-container {
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

.demo-form-inline {
  display: flex;
  align-items: center;
}

.el-form-item {
  margin-right: 10px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

</style>
<style>
.horizontal-scroll .el-cascader__tags {
    display: flex;
    flex-wrap: nowrap;
    right: 75px;
}
.horizontal-scroll .el-tag {
    /* margin: 0;
    padding: 0 8px;
    height: 24px;
    line-height: 22px; */
}
</style>
